import React from 'react';
import {View, Text, TouchableHighlight, StyleSheet} from 'react-native';
import Colors from '../../utils/Colors';
import {useSelector} from 'react-redux';

const CateFilterModal = ({onSelectSort, sortSelect}) => {
  const sortList = useSelector(state => state.categroy.sort_types);
  return (
    <View style={styles.sizeBox}>
      {sortList.map(item => {
        return (
          <TouchableHighlight
            activeOpacity={1}
            underlayColor={Colors.white}
            style={styles.btn}
            onPress={onSelectSort(item.key)}
            key={item.key}>
            <Text
              style={
                sortSelect === item.key
                  ? styles.sortTextActive
                  : styles.sortText
              }>
              {item.value}
            </Text>
          </TouchableHighlight>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  sizeBox: {
    backgroundColor: Colors.white,
    width: '100%',
  },
  btn: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    height: 50,
    borderBottomWidth: 0.5,
    borderBottomColor: Colors.patFontGray2,
  },
  sortText: {
    fontSize: 16,
    color: Colors.patFontGray2,
  },
  sortTextActive: {
    fontSize: 16,
    color: Colors.patFontRed,
  },
});
export default CateFilterModal;
